import {$} from '../js/library/jquery.js';
import '../js/library/header.js';
import cookie from './library/cookie.js';


$('.list-1').mouseenter(function(){
    $('.site-cate').removeClass("hide");
    $('.hero-ul').css({'background':'#fff','border':'1px solid red'});
    $('.hero-ul>li>a').css('color','#000');
});
$('.list-1').mouseleave(function(){
    $('.site-cate').addClass("hide");
});


//通过search获得商品id
let id=location.search.split('=')[1];


$.ajax({
    type: "get",
    url: "../../interface/getItem.php",
    data: {
        id:id
    },
    dataType: "json",
    success: function (res) {
       let picture=JSON.parse(res.picture);
      
       let temp=`  <div class="product">
       <div class="nav-bar">
           <div class="container">
               <h2>${res.title}</h2>
             <div class="con">
                 <div class="left"></div>
                 <div class="right">
                     <a href="">用户评价</a>
                 </div>
             </div>
           </div>
       </div>
   </div>
   <div class="details">
       <div class="details-pag  ">
           <div class="details-info">
               <div class="details-box container">
                   <div class="img-left">   
                       <div class="img-box">
                           <div class="swiper">
                               <div class="swiper-wrapper">
                                 <div class="swiper-slider">
                                   <img src="../${picture[0].src}" alt="">
                                 </div>
                                 <div class="swiper-slider">
                                   <img src="../${picture[0].src}" alt="">
                                 </div>
                                 <div class="swiper-slider">
                                   <img src="../${picture[0].src}" alt="">
                                 </div>
                                 <div class="swiper-slider">
                                   <img src="../${picture[0].src}" alt="">
                                 </div>
                                 <div class="swiper-slider">
                                   <img src="../${picture[0].src}" alt="">
                                 </div>
                               </div>
                               <div class="swiper-paa">
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 <span></span>
                                 <span></span>
                               </div>
                               <div class="swiper-next"></div>
                               <div class="swiper-prev"></div>
                           </div>
                       </div>
                   </div>
                   <div class="details-con">
                       <h2>${res.title}</h2>
                       <p class="p1">${res.details}</p>
                       <p class="xiaomi">自营</p>
                       <div class="shopp-price">
                           <span>
                               ${res.price}元
                           </span>
                       </div>
                       <div class="line">
                           
                       </div>
                       <div class="address">
                           <div class="address-box">
                            <span class="iconfont icon-dingwei tb
                             "></span>
                               <div class="address-info">
                                   <span>湖南</span>
                                   <span>长沙</span>
                                   <span>天心区</span>
                                   <span>暮云街道</span>
                                 
                               </div>
                               <a href="">修改</a>
                               <div class="info">
                                   <div class="desc-info">
                                       <span>有现货</span>
                                   </div>
                               </div>
                           </div>
                       </div>
                       <div class="buy">
                           <div class="buy-box">
                               <div class="title">选择颜色</div>
                               <ul class="clear">
                                   <li><a href="">白色</a></li>
                               </ul>
                           </div>
                           <div class="buy-box">

                           </div>
                       </div>
                       <div class="selected">
                           <ul>
                               <li>
                                   ${res.title}
                               </li>
                               <span>
                                   ${res.price}元
                               </span>
                           </ul>
                           <div class="total-price">总计：${res.price}元</div>
                       </div>
                       <div class="btn-box">
                           <div class="sale-btn">
                           <a href="../html/shopping.html">
                                   加入购物车
                                   </a>
                           </div>
                           <div class="favorite-btn">
                               <a href="">
                                   <i class="iconfont icon-hear"></i>
                                   <i class="iconfont red"><i class="iconfont redsd"></i></i>喜欢
                               </a>
                           </div>
                         </div>
                           <div class="after-info">
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>小米自营</em>
                               </a></span>
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>小米发货</em>
                               </a></span>
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>七天无理由退货</em>
                               </a></span>
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>运费说明</em>
                               </a></span>
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>企业信息</em>
                               </a></span>
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>售后服务政策</em>
                               </a></span> 
                               <span><a href="">
                                   <i class="iconfont icon-gouxuan1"></i>
                                   <em>七天价格保护</em>
                               </a></span>
                       
                       </div>
                   </div>

               </div>
           </div>
           <div class="product-detail ">
               <div class="product-box">
                 <div class="product-item">
                   <div class="section">
                     <div class="section-plain ">
                       <div class="img-box " style="height:674px">
                         <img src="../img/大图01.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 251px;">
                         <img src="../img/大图02.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 687px;">
                         <img src="../img/大图03.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 649px;">
                         <img src="../img/大图04.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 819px;">
                         <img src="../img/大图05.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 587px;">
                         <img src="../img/大图06.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 764px;">
                         <img src="../img/大图07.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 294px;">
                         <img src="../img/大图08.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 465px;">
                         <img src="../img/大图09.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 832px;">
                         <img src="../img/大图10.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 799px;">
                         <img src="../img/大图11.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 575px;">
                         <img src="../img/大图12.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 677px;">
                         <img src="../img/大图13.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 560px;">
                         <img src="../img/大图14.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 726px;">
                         <img src="../img/大图15.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="img-box" style="height: 743px;">
                         <img src="../img/大图16.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain">
                       <div class="section-title container">
                         <h3>官方微信</h3>
                       </div>
                       <div class="img-box" style="height: 160px;">
                         <img src="../img/17.jpg" alt="">
                       </div>
                     </div>
                   </div>
                   <div class="section">
                     <div class="section-plain"><div class="section-title container">
                       <h3>价格说明</h3>
                     </div>
                       <div class="img-box" style="height: 189px;">
                         <img src="../img/18.jpeg" alt="">
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
           </div>
       </div>
   </div>`;
       
  $('.content-header').append(temp).find('.btn-box').on('click',function(){
   let num=1;
    addItem(res.id,res.price,num);
  }) ;
            
    }
  
});

function addItem(id,price,num){
  let shop =cookie.get('shop');// 设置cookie
  let product={
    id, //简写  id=id price=price
    price,
    num
  }
 

  ///判断当前cookie是否有数据
  if(shop){  // 有数据  取出为字符串
    shop=JSON.parse(shop);

    //添加前判断商品书否存在
    if(shop.some(el=>el.id===id)){
      let _index=shop.findIndex(elm=>elm.id==id);
      shop[_index].num+=num;
   ;
     
    }else{
          shop.push(product);
    }




  }else{  // 第一次没有数据创建数组存入数据
    shop=[];
    shop.push(product);
  }

  cookie.set('shop',JSON.stringify(shop),1);  // cookie只能存储字符串
}